<template>
  <transition name="subAnimation">
    <div id="pathChoice" class="zubox">
      <div class="forms zumain">
        <p class="forms_header zumain_header">
          <span>选择指定目标文件路径</span>
        </p>
        <div class="zumain_center">
          <div class="block elTree">
            <el-tree
              class="treestyle"
              ref="tree"
              :data="data"
              node-key="id"
              :check-strictly="true"
              :props="props"
              accordion
              :expand-on-click-node="true"
              :default-expanded-keys="defaultTreekeys"
              :default-checked-keys="checkedKeys"
              @check-change="selectTreeNode"
              @node-click="handleNodeClick"
              :current-node-key="currentKey"
              :check-on-click-node="true"
              :highlight-current="true"
              :render-content="
                isUpdateGroup ? updateRenderContent : renderContent
              "
            >
            </el-tree>
          </div>
        </div>

        <div class="forms_bottom zumain_btn">
          <el-button plain @click="addyin">取消</el-button>
          <el-button @click="onSubmit">提交</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
// import { addFileUploadApply, updateFileUploadApply } from "../../apis2";
export default {
  data() {
    return {
      data: [],
      //当前选中数据
      isact: "",
      //修改之后的标题
      isactTitle: "",
      //默认展开
      defaultTreekeys: [""],
      checkedKeys: [],
      currentKey: "",
      isUpdateGroup: false,
      props: {
        children: "children",
      },
      currentNodeData: [],
      //当前正在修改
      editChild: false,
    //   当前正在增加数据
    addChild:false,

    };
  },
  created() {
    this.data = [
      { name: "测试数据1", id: "1", parentId:"", whole: "测试路径1",children:[
          { name: "测试数据11",parentId:"1", id: "11", whole: "测试路径11",children:[] },
          { name: "测试数据12",parentId:"1", id: "12", whole: "测试路径12",children:[] },
          { name: "测试数据13",parentId:"1", id: "13", whole: "测试路径13",children:[] },
          { name: "测试数据14",parentId:"1", id: "14", whole: "测试路径14",children:[] },
      ]},
      { name: "测试数据2", id: "2", parentId:"", whole: "测试路径2", children:[] },
      { name: "测试数据3", id: "3", parentId:"", whole: "测试路径3", children:[] },
      { name: "测试数据4", id: "4", parentId:"", whole: "测试路径4", children:[] },
    ];
  },
  methods: {
    //   树节点渲染函数
    renderContent(h, { node, data, store }) {
      return (
        <span
          class="treedefStyle"
          on-mouseenter={(e) => this.mouseenteract(data, e)}
          on-mouseleave={(e) => this.mouseleaveact(data, e)}
        >
          <span>{data.name}</span>
          {this.isact == data ? (
            <span>
              <el-button
                type="primary"
                size="mini"
                on-click={(e) => this.handleUpdataGroup(node, data, e)}
              >
                修改
              </el-button>
              <el-button
                type="primary"
                size="mini"
                on-click={(e) => this.handleAddGroup(node, data, e)}
              >
                增加
              </el-button>
              <el-button
                type="primary"
                size="mini"
                on-click={(e) => this.handleDelete(node, data, e)}
              >
                删除
              </el-button>
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },
    //鼠标移入函数
    mouseenteract(data, e) {
      this.isact = data;
    },
    mouseleaveact(data, e) {
      this.isact = "";
    },

    //   树节点渲染函数
    updateRenderContent(h, { node, data, store }) {
      setTimeout(() => {
        document.getElementById("pathInput_focus").focus;
      });
      return (
        <span class="treedefStyle">
          {this.isact == data ? (
            <input
              type="text"
              id="pathInput_focus"
              on-click={(e) => this.inpclick(e)}
              onChange={this.handleChangeTitle.bind(this)}
              value={data.name}
            ></input>
          ) : (
            <span>{data.name}</span>
          )}

          {this.isact == data ? (
            <span>
              <el-button
                type="primary"
                size="mini"
                on-click={(e) => this.updataGroup(e)}
              >
                确定
              </el-button>
              <el-button
                type="primary"
                size="mini"
                on-click={(e) => this.cancelUpdataGroup(e)}
              >
                取消
              </el-button>
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },

    //修改数据
    handleUpdataGroup(node, data, e) {
      e.stopPropagation();
      this.isUpdateGroup = true;
      this.editChild = true;
    },
    // 选中输入框
    inpclick(e) {
      e.stopPropagation();
    },

    // 增加数据
    handleAddGroup(node, data, e) {
      e.stopPropagation();
      if(this.isUpdateGroup){return}
      this.$refs.tree.store.nodesMap[data.id].expanded=true
      this.di(this.data,data)
      this.addChild=true
    },
    //查找对应的根节点
    di(item,isNode){
        item.map((item,index)=>{
            if(item.id==isNode.id){
                let id=parseInt(Math.random()*100000000+1000)
                let newChild={
                    children:[],
                    id:id,
                    name:"",
                    parentId:item.id,
                    whole:"", 
                }

                this.delNewTree={...newChild}
                item.children.push(newChild)
                this.isact=newChild
                this.delChild=true
                this.isUpdateGroup=true
                return
            }
            if(item.children.length>0){
                this.di(item.children,isNode)
            }
        })
    },
    //删除数据
    handleDelete(node, data, e) {
      e.stopPropagation();
      this.isUpdateGroup = true;
      this.editChild = true;
    },
    //输入框的值发生改变
    handleChangeTitle(e) {
      e.stopPropagation();
      let value = e.target.value;
      this.isactTitle = value;
    },
    //确认修改
    updataGroup(e) {
      e.stopPropagation();
      setTimeout(() => {
        if (this.isactTitle.trim() == "") {
          this.$message.warning("名称不能为空");
          return;
        }
        if (this.editChild) {
            // 这样只能修改一级数据，实际情况中应该是直接将数据返回后端，在重新从后端请求新数据，就不写那么复杂了
          this.data.map((item, index) => {
            if (item.id == this.isact.id) {
              item.name = this.isactTitle;
            }
          });
        }

        this.isactTitle = "";
        this.editChild = false;
        this.addChild=false
        this.isUpdateGroup=false
      }, 100);
    },
    //修改取消
    cancelUpdataGroup(e) {},

    //单选
    selectTreeNode(data, checked, tree) {
      if (checked) {
        this.currentNodeData = data;
        this.$refs.tree.setCheckedNodes([data]);
      }
    },
    //当前选中节点
    handleNodeClick(data) {
      console.log("当前选中节点数据", data);
    },

    addyin() {},
    onSubmit() {},
  },
};
</script>

<style  scoped>
/deep/ .el-select-dropdown {
    display: none;
  }
  .header_main {
    height: 72px;
    background: #ffffff;
    padding-left: 24px;
    border-bottom: 1px solid #cccccf;
  }
  
  
  .forms {
    width: 560px;
    background: #ffffff;
    max-height: 90vh;
    padding: 0px;

    
}
.forms_form {
      max-height: calc(90vh - 187px);
      overflow: auto;
      margin: 0px;     
  }
.forms_form .el-select {
        width: 100%;
      }
.el-form-item {
        margin: 0px 0px 14px 0;
        text-align: left;
        
      }
.forms_bottom {
        border-top: 1px solid #cccccf;
        background: #ffffff;
      }
.discolor>>> label {
          color: #999a9d;
        }
 .emailStyle>>> .el-select__caret {
          display: none;
        }
/deep/.el-input__inner {
          width: 100%;
        }
</style>
